<template>
  <div class="invitationWindow">
    <styleSolt @saveFun="saveFun" :isShowSaveAs="isShowSaveAs">
      <template slot="content">
        <windowStyle>
          <template slot="content">
            <div class="content" :class="{
                fl: invitationForm.horizontal === 'left', fr: invitationForm.horizontal === 'right',
                horizontalCenter: invitationForm.horizontal === 'center',
                verticalCenter: invitationForm.vertical === 'center',
              }" :style="{ left: invitationForm.horizontal === 'left' ? `${invitationForm.horizontalPixel}px` : '',
                right: invitationForm.horizontal === 'right' ? `${invitationForm.horizontalPixel}px` : '',
                top: invitationForm.vertical === 'top' ? `${invitationForm.verticalPixel}px` : '',
                bottom: invitationForm.vertical === 'bottom' ? `${-143 + Number(invitationForm.verticalPixel)}px` : ''}">
              <header class="header">
                <span class="close fr">x</span>
                <div class="fl headerLogo">
                  <img :src="initConfig && invitationForm.logoUrl ? initConfig + invitationForm.logoUrl : defaultLogo"/>
                </div>
                <div class="fl inviteTitle">
                  {{invitationForm.inviteTitle}}
                </div>
              </header>
              <div class="container">
                <div class="placeholder">
                  <div class="placeholderTxt">{{invitationForm.placeholder}}</div>
                  <div class="btn">立即咨询</div>
                </div>
              </div>
              <footer class="footer" v-if="!$store.state.oem.oemFlag">
                <img class="logo" src="../../../../../assets/img/logo.png"/>
                容联七陌提供技术支持
              </footer>
              <footer class="footer" v-else></footer>
            </div>
          </template>
        </windowStyle>
      </template>
      <template slot="edit">
        <el-form class="m7-form invitationForm" :rules="rules"
          size="mini" :model="invitationForm"
          ref="invitationForm" label-position="top">
          <el-form-item label="邀请框位置：">
            <p class="title">水平方向</p>
            <m7Select
              class="select"
              size="mini"
              filterable
              :options="horizontalOpt"
              :defaultProps="{value: 'value', label: 'label'}"
              v-model="invitationForm.horizontal"
              placeholder="请选择">
            </m7Select>
            <el-input class="ipt" v-show="invitationForm.horizontal !== 'center'" v-model="invitationForm.horizontalPixel" type="number">
              <template slot="append">像素</template>
            </el-input>
            <p class="title">垂直方向</p>
            <m7Select
              class="select"
              size="mini"
              filterable
              :options="verticalOpt"
              :defaultProps="{value: 'value', label: 'label'}"
              v-model="invitationForm.vertical"
              placeholder="请选择">
            </m7Select>
            <el-input class="ipt" v-show="invitationForm.vertical !== 'center'" v-model="invitationForm.verticalPixel" type="number">
              <template slot="append">像素</template>
            </el-input>
          </el-form-item>
          <el-form-item label="展示图片" prop="logoUrl">
            <span slot="label">
              展示图片
              <span class="adviceColor">（建议尺寸：50*50）</span>
            </span>
            <img class="logoImg" v-if="initConfig && invitationForm.logoUrl" :src="initConfig + invitationForm.logoUrl" alt="">
            <icon-svg :icon-class="'tupian'" class="logoIcon" v-else></icon-svg>
            <el-upload
              class="upLoad"
              :show-file-list="false"
              accept=".jpg, .gif, .png, .bmp"
              action=""
              :on-success="systemUploadSuccess"
              :on-error="uploadError"
              :before-upload="beforeUpload"
              :http-request="uploadRequest">
              <span>上传图片</span>
            </el-upload>
            <span v-if="initConfig && invitationForm.logoUrl">
              <span class="line"></span>
              <span class="delImg" @click="delSystemImgFun({imgUrl: invitationForm.logoUrl, type: 'logoUrl'})">删除</span>
            </span>
          </el-form-item>
          <el-form-item label="邀请语" prop="inviteTitle">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="invitationForm.inviteTitle"
              maxlength="20"
              show-word-limit>
            </el-input>
          </el-form-item>
          <el-form-item label="输入框提示语" prop="placeholder">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="invitationForm.placeholder"
              maxlength="50"
              show-word-limit>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
    </styleSolt>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { uploadQiniu } from '@/utils/upload'
import windowStyle from '@/components/windowStyle/index.vue'
import styleSolt from '@/views/config/webchat/channel/base/styleSolt.vue'
import { deepClone } from '@/utils/common'
import { CommonModule } from '@/store/modules/common'
interface InvitationForm {
  horizontal: string // 水平方向
  horizontalPixel: number // 水平像数
  vertical: string // 垂直方向
  verticalPixel: number // 垂直像数
  logoUrl: string // logo图片
  inviteTitle: string, // 邀请语
  placeholder: string // 提示语
}
const InvitationFormTem = {
  horizontal: 'right', // 水平方向
  horizontalPixel: 20, // 水平像数
  vertical: 'bottom', // 垂直方向
  verticalPixel: 85, // 垂直像数
  logoUrl: '', // logo图片
  inviteTitle: '欢迎访问，请问有什么可以帮您的吗？', // 邀请语
  placeholder: '请输入您想咨询的内容...' // 提示语
}
@Component({
  name: 'invitationWindow',
  components: { windowStyle, styleSolt }
})
export default class InvitationWindow extends Vue {
  @Prop({ type: Boolean, default: () => false }) private isShowSaveAs
  private $bus: any
  private $message: any

  private defaultLogo: string = require('../../../../../assets/img/userAgent.png')

  private rules: any = {}

  private initConfig: string = ''

  private fileName: string = ''

  private horizontalOpt: any = [
    { value: 'center', label: '居中对齐' },
    { value: 'left', label: '向左对齐' },
    { value: 'right', label: '向右对齐' }
  ]

  private verticalOpt: any = [
    { value: 'center', label: '居中对齐' },
    { value: 'top', label: '向上对齐' },
    { value: 'bottom', label: '向下对齐' }
  ]

  public invitationForm: InvitationForm = {
    horizontal: 'right', // 水平方向
    horizontalPixel: 20, // 水平像数
    vertical: 'bottom', // 垂直方向
    verticalPixel: 85, // 垂直像数
    logoUrl: '', // logo图片
    inviteTitle: '欢迎访问，请问有什么可以帮您的吗？', // 邀请语
    placeholder: '请输入您想咨询的内容...' // 提示语
  }

  private systemUploadSuccess (data: any) {
    this.invitationForm.logoUrl = data.key ? `/${data.key}` : ''
  }

  private delSystemImgFun (obj: any) {
    const sendData = { data: [{ key: obj.imgUrl, bucket: 'v7-fs-im' }] }
    const actionData = { url: '/base/action/qiniu/delete', method: 'POST', data: sendData }
    CommonModule.publicAction(actionData).then(res => {
      if (res && res.success) {
        this.invitationForm[obj.type] = ''
      }
    })
  }

  private uploadError () {
    this.$message({ message: '图片上传失败，请重新选择图片上传', type: 'error' })
  }

  private beforeUpload (file: any) {
    this.fileName = file.name.replace(/\s/g, '')
    if (file.size / 1024 / 1024 > 3) {
      this.$message({ message: '图片大小不能超过3M', type: 'error' })
      return false
    }
  }

  private uploadRequest (request: any) {
    uploadQiniu({ type: 'im', fileName: this.fileName }, request)
  }

  private saveFun () {
    this.$emit('saveFun')
  }

  private setInvitationData (data?: InvitationForm) {
    if (data) {
      const { horizontal, horizontalPixel, vertical, verticalPixel, logoUrl, placeholder, inviteTitle } = data
      this.invitationForm = {
        horizontal, // 水平方向
        horizontalPixel, // 水平像数
        vertical, // 垂直方向
        verticalPixel, // 垂直像数
        logoUrl, // logo图片
        inviteTitle, // 邀请语
        placeholder // 提示语
      }
    } else {
      this.invitationForm = deepClone(InvitationFormTem)
    }
  }

  private mounted () {
    const config = (this as any).$store.state.common.initConfig
    this.initConfig = config ? config.qiniuDomainMap.im : ''
    this.$bus.$on('styleEditInvitation', (res: InvitationForm) => {
      if (res) {
        this.setInvitationData(res)
      } else {
        this.setInvitationData()
      }
    })
  }

  private beforeDestroy () {
    this.$bus.$off('styleEditInvitation')
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../../common/style/common.styl'
.invitationWindow
  height 100%
  .content
    width 360px
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    // margin 0 auto
    overflow-y auto
    border-radius 6px
    position relative
    height 334px
    .header
      height 150px
      background-image linear-gradient(to right, #2076F1 , #2D91F5, #2076F1)
      .close
        display inline-block
        margin 10px
        font-size 16px
        color #ffffff
      .headerLogo
        margin 26px 15px 0px 14px
        img
          width 50px
          height 50px
          border-radius 50%
      .logo
        width 50px
        height 50px
        border-radius 50%
      .inviteTitle
        margin-top 26px
        color #ffffff
        width 250px
        line-height 28px
        font-size 18px
    .container
      height 146px
      background-color #F6F6F6
      .placeholder
        width 332px
        top 102px
        left 13px
        height 180px
        background #FFFFFF
        position absolute
        box-shadow 0px 0px 18px 0px rgba(219, 219, 219, 0.5)
        border-radius 6px
        .placeholderTxt
          margin 16px 0px 0px 12px
          color #B3B9C7
          line-height 22px
        .btn
          position absolute
          width 80px
          height 32px
          background #E8F3FC
          border-radius 16px
          color #008BEE
          text-align center
          line-height 32px
          bottom 10px
          right 10px
    .footer
      padding 6px
      background-color #F8F8F8
      text-align center
      color #686E84
      height 24px
      .logo
        vertical-align middle
        width 13px
        height 13px
        display inline-block
  .horizontalCenter
    left 50%
    margin-left -180px
  .verticalCenter
    top 50%
    margin-top -187px
  .select
    width 40%
    margin-bottom 10px
  .ipt
    width 45%
    margin-bottom 10px
    margin-left 10px
  .title
    font-size 12px
    color $main
    margin-bottom 5px
  .logo.V7_iconfont
    font-size 40px
    color #008BEE
    line-height 40px
    vertical-align middle
  .logoImg
    width 40px
    height 40px
    border-radius 50%
    vertical-align middle
  .upLoad
    display inline-block
    margin-left 10px
    span
      font-size 12px
      color #008BEE
  .logoIcon
    font-size 40px
    vertical-align middle
  .delImg
    font-size 12px
    color #FC6B5C
    margin-left 9px
    display inline-block
    cursor pointer
  .adviceColor
    color #767E91
  .line
    width 1px
    height 9px
    background #008BEE
    margin-left 9px
    opacity 0.3
    display inline-block
</style>
